@import "../../style/public";
.memberManage {
  .page-infinite-loading {
    text-align: center;
    @include remCalc(margin-top, 20);
    @include remCalc(height, 80);
    @include remCalc(line-height, 80);
    @include remCalc(font-size, 14);
  }
  .filter-icon {
    @include remCalc(font-size, 38);
    @include remCalc(padding-left, 20);
    color: #333333;
  }
  .blue {
    color: #459dff;
  }
  .search-wrap {
    @include remCalc(margin-top, 30);
  }
  .section {
    overflow: scroll;
    position: relative;
  }
  .filter-result {
    @include remCalc(font-size, 24);
    @include remCalc(line-height, 34);
    color: #999999;
    @include remCalc(padding, 20, 30);
    @extend %box-sizing;
    background: #f9f9f9;
  }
  .no-more {
    text-align: center;
    color: #999;
    @include remCalc(font-size, 24);
    @include remCalc(padding-top, 30);
  }
  .list {
    background: #fff;
    @include remCalc(padding-left, 30);
    @include remCalc(margin-top, 20);
    @include thin-border(true, false);
    li {
      display: flex;
      @include remCalc(padding, 20, 30, 20, 0);
      @include thin-border(false, false, top);
      &:first-child {
        &::after {
          display: none;
        }
      }
      .left {
        > img {
          @include remCalc(width, 120);
          @include remCalc(height, 120);
          display: block;
          border-radius: 50%;
          border: 1px solid #ddd;
        }
      }
      .right-data {
        @include remCalc(padding-left, 20);
        flex: 1;
        .member-name {
          @include remCalc(font-size, 32);
          @include remCalc(height, 36);
          @include remCalc(line-height, 36);
          @include remCalc(margin-bottom, 16);
          color: #333333;
        }
        .middle {
          display: flex;
          // @include remCalc(width, 200);
          @include remCalc(font-size, 24);
          @include remCalc(margin-bottom, 8);
          .level {
            @include remCalc(padding, 2,2);
            //@include remCalc(height, 28);
            //@include remCalc(line-height, 28);
            box-sizing: border-box;
            background: rgba(69, 157, 255, 0.1);
            border: 1px solid #459dff;
            border-radius: 4px;
            color: #459dff;
            display: flex;
            align-items: center;
            i {
              @include remCalc(font-size, 24);
            }
            span {
              @include remCalc(font-size, 22);
            }
          }
          .gender {
            @include remCalc(margin-left, 20);
            .zhk-xb-n {
              color: #459dff;
            }
            .zhk-xb-nv {
              color: #ff96aa;
            }
          }
        }
        .mobile {
          @include remCalc(font-size, 28);
          @include remCalc(line-height, 36);
          color: #999;
        }
      }
      .leave {
        .name {
          color: #cccccc;
        }
        .store {
          color: #cccccc;
        }
      }
    }
    li:last-child {
      border: 0;
    }
  }
}

.no-more {
  color: #ddd;
  @include remCalc(font-size, 26);
  text-align: center;
  @include remCalc(line-height, 40);
  @include remCalc(padding-bottom, 20);
  position: relative;
  span {
    position: relative;
  }
  span:before {
    content: "";
    position: absolute;
    height: 1px;
    background: #ddd;
    @include remCalc(width, 20);
    @include remCalc(top, 10);
    @include remCalc(left, -30);
  }
  span:after {
    content: "";
    position: absolute;
    height: 1px;
    background: #ddd;
    @include remCalc(width, 20);
    @include remCalc(top, 14);
    @include remCalc(right, -30);
  }
}
.memberManage-filterItem {
  .page-body {
    @include remCalc(padding, 0, 0, 100, 0);
  }
  width: 100%;
  height: 100%;
  .section {
    @include remCalc(padding, 0, 30);
    color: #333;
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 40, 0, 28, 0);
    }
    .picker-val {
      @include remCalc(font-size, 28);
      background: #f6f6f6;
      border: 1px solid #eeeeee;
      border-radius: 4px;
      @include remCalc(padding, 0, 20);
      @include remCalc(height, 80);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      i {
        color: #ccc;
      }
    }
    .check-list {
      display: flex;
      flex-flow: wrap;
      justify-content: space-between;
      li {
        text-align: center;
        //@include remCalc(padding, 0, 76);
        @include remCalc(width, 330);
        @include remCalc(height, 80);
        @include remCalc(line-height, 80);
        @include remCalc(font-size, 28);
        @include remCalc(margin-bottom, 20);
        color: #333;
        background: #f6f6f6;
        border: 1px solid #eeeeee;
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        i {
          color: #fff;
          position: absolute;
          @include remCalc(font-size, 16);
          @include remCalc(right, 6);
          @include remCalc(bottom, 2);
          display: none;
        }
        &.checked {
          background: rgba(69, 157, 255, 0.1);
          color: #459dff;
          border: 1px solid transparent;
          i {
            display: block;
          }
          &::before {
            position: absolute;
            content: "";
            display: block;
            @include remCalc(width, 100);
            @include remCalc(height, 40);
            @include remCalc(right, -26);
            @include remCalc(bottom, -20);
            background: #459dff;
            transform: rotate(-218deg);
          }
        }
      }
    }
  }
  .section.has-right {
    @include remCalc(padding, 0, 0, 0, 30);
    .check-list {
      display: flex;
      flex-flow: wrap;
      justify-content: left;
      li {
        @include remCalc(margin-right, 26);
      }
    }
  }
  .btn-wrap {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0;
    box-shadow: 0 -2px 8px 0 #cccccc;
    > div {
      flex: 1;
      @include remCalc(font-size, 36);
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);

      text-align: center;
      & + div {
        background: #459dff;
        color: #fff;
      }
      background: #fff;
      color: #459dff;
    }
  }
  .pick-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include remCalc(padding, 0, 30, 0, 0);
    color: #333;
    @include remCalc(font-size, 36);
    i {
      color: #ccc;
    }
  }
}

.memberManage-details {
  width: 100%;
  height: 100%;
  .top-info {
    display: flex;
    background: #fff;
    @include remCalc(padding, 20, 30, 20, 30);
    @include thin-border(false, false, top);
    &:first-child {
      &::after {
        display: none;
      }
    }
    .left {
      > img {
        @include remCalc(width, 120);
        @include remCalc(height, 120);
        display: block;
        border-radius: 50%;
        border: 1px solid #ddd;
      }
    }
    .right-data {
      @include remCalc(padding-left, 20);
      flex: 1;
      .member-name {
        @include remCalc(font-size, 32);
        @include remCalc(height, 36);
        @include remCalc(line-height, 36);
        @include remCalc(margin-bottom, 16);
        color: #333333;
      }
      .middle {
        display: flex;
        // @include remCalc(width, 200);
        @include remCalc(font-size, 24);
        @include remCalc(margin-bottom, 8);
        .level {
          // @include remCalc(width, 60);
          // @include remCalc(height, 28);
          // @include remCalc(line-height, 28);
          @include remCalc(padding, 2,2);
          box-sizing: border-box;
          background: rgba(69, 157, 255, 0.1);
          border: 1px solid #459dff;
          border-radius: 4px;
          color: #459dff;
          display: flex;
          align-items: center;
          i {
            @include remCalc(font-size, 24);
          }
          span {
            @include remCalc(font-size, 24);
          }
        }
        .gender {
          @include remCalc(margin-left, 20);
          .zhk-xb-n {
            color: #459dff;
          }
          .zhk-xb-nv {
            color: #ff96aa;
          }
        }
      }
      .mobile {
        @include remCalc(font-size, 28);
        @include remCalc(line-height, 36);
        color: #999;
      }
    }
    .leave {
      .name {
        color: #cccccc;
      }
      .store {
        color: #cccccc;
      }
    }
  }
  .bottom-info {
    @include thin-border(true, false);
    background: #fff;
    li {
      display: flex;
      @include remCalc(padding, 20, 30);
      @include remCalc(line-height, 50);
      @include remCalc(font-size, 32);

      > span {
        color: #999;
      }
      > div {
        color: #333;
        flex: 1;
        text-align: right;
      }
    }
  }
}
.member-analysis {
  line-height: 1.1;
  .hide {
    display: none;
  }
  .ring-title{
    @include remCalc(font-size, 32);
    @include remCalc(padding, 30,0,0,0);
    text-align: center;
  }
  .chart-tips {
    @include remCalc(font-size, 24);
    @include remCalc(padding, 0, 30, 20, 30);
    color: #999;
    span {
      color: #fd8217;
    }
  }
  .chart-remark {
    @include remCalc(font-size, 24);
    color: #999;
    line-height: 1.5;
  }
  .tab-bar {
    display: flex;
    border: 1px solid $color-red;
    border-radius: 4px;
    overflow: hidden;
    @include remCalc(margin, 50, 0, 40, 0);
    li {
      flex: 1;
      text-align: center;
      @include remCalc(height, 80);
      @include remCalc(line-height, 80);
      @include remCalc(font-size, 30);
      color: $color-red;
      background: #fff;
      border-left: 1px solid $color-red;
      box-sizing: border-box;
      &:first-child {
        border-left: none;
      }

      &.selected {
        background: $color-red;
        color: #fff;
      }
    }
  }
  .section-title {
    box-sizing: border-box;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    @include thin-border(false, false, bottom);
    @include remCalc(font-size, 30);
    @include remCalc(margin-left, 30);
    @include remCalc(padding-right, 30);
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .section-container {
    @include remCalc(padding, 0, 30);
  }
  .filter {
    @include remCalc(margin-top, 20);
    @include remCalc(font-size, 26);
    color: #666;
    display: flex;
    @include thin-border(false, false, bottom, #e5e5e5);
    > li {
      flex: 1;
      text-align: center;
      background: #fff;
      @include remCalc(height, 90);
      @include remCalc(line-height, 90);
      box-sizing: border-box;
      position: relative;
      &:first-child {
        &::before {
          position: absolute;
          content: "";
          right: 0;
          @include remCalc(top, 20);
          @include remCalc(height, 50);
          width: 1px;
          background: #999;
        }
      }
      > span {
        display: inline-block;
        @include remCalc(width, 260);
        @extend %text-overflow;
      }
      i {
        color: #c7c7cc;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        @include remCalc(right, 30);
        &::before {
          display: inline-block;
          transform: rotate(90deg);
        }
      }
    }
  }
  %section {
    @include remCalc(margin-bottom, 20);
    @include thin-border(true, false);
    background: #fff;
  }
  .chart-wrap {
    @include remCalc(margin-top, 30);
    @include remCalc(padding, 10, 30);
  }
  .trade-summary {
    .ts-content {
      @include remCalc(padding, 0, 30, 60, 30);
      .top {
        text-align: center;
        .total-get {
          span {
            display: block;
            @include remCalc(font-size, 28);
            @include remCalc(padding, 50, 0, 40, 0);
            color: #999;
          }
          div {
            @include remCalc(font-size, 70);
            color: #ff801a;
          }
        }
        .discount {
          @include remCalc(padding, 30, 0, 50, 0);
          @include remCalc(font-size, 26);
          color: #666;
        }
      }
      .bottom {
        display: flex;
        > li {
          @include remCalc(padding-left, 70);
          flex: 1;
          position: relative;
          &:first-child {
            @include remCalc(padding-left, 30);
            &::before {
              position: absolute;
              content: "";
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              @include remCalc(height, 114);
              width: 1px;
              background: #999;
            }
          }
          .money {
            span {
              @include remCalc(font-size, 26);
              color: #7e7e7e;
            }
            div {
              @include remCalc(padding, 28, 0, 16, 0);
              @include remCalc(font-size, 50);
              color: #000;
            }
          }
          .amount {
            @include remCalc(font-size, 26);
            color: #666;
          }
        }
      }
    }
  }
  .get-way {
    @extend %section;
    @include remCalc(padding, 50, 0, 40, 0);
  }
  .zhk-statistics {
    @extend %section;
    @include remCalc(padding-bottom, 30);
    .tip {
      @include remCalc(font-size, 22);
      @include remCalc(padding, 20, 0, 0, 0);
      color: #7e7e7e;
      text-align: center;
    }
  }
  .effect-statistics {
    @extend %section;
    @include remCalc(padding, 0, 30, 20, 30);
  }
  .store {
    @extend %section;
  }
  .all-store {
    background: #fff;
    @include remCalc(font-size, 30);
    color: #333;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    @include remCalc(padding, 0, 30);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i {
      color: #c9c9cd;
    }
  }
}
